<template>
    <div class="app-container">
        <common-header></common-header>
        <div class="container-top">
            <p class="firstTip">婚育养老</p>
            <div class="secondTip">
                <p>晚上好，{{userName}}! 欢迎使用婚育养老主题服务</p>
            </div>
        </div>
        <div class="container-center">
            <div class="box">
                <ul class="content">
                    <li class="content-item" v-for="item of tipList" :key="item.id" @click="jump(item.id)">
                        <div class="item-left">
                            <img :src="item.img"/>
                            <div class="text">
                                <p>{{item.name}}</p>
                                <p>江苏省民政厅</p>
                                <div class="rate">
                                    <van-rate v-model="item.rate" icon="star" void-icon="star-o" size="12" color="#959998"/>
                                    <span>{{item.people}}人使用</span>
                                </div>
                            </div>
                        </div>
                        <div class="item-right">
                            <van-icon name="arrow" color="#A4CEE4" size="20"/>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container-bottom">
            <div class="contanct">
                <div class="txt">
                    <span>网上批</span>
                    <span>快递达</span>
                    <span>一号达</span>
                    <span>不见面</span>
                </div>
                <div class="txt">
                    <span>政务服务总客服:</span>
                    <span>12345</span>
                    <img :src="phone"/>
                </div>
            </div>
        </div>
  </div>
</template>
<script>
import CommonHeader from '@/common/header/CommonHeader';
import { mapState } from 'vuex'

export default {
  name: 'SecondPage',
  components: {
    CommonHeader
  },
  data () {
    return {
      tipList: [{
        id: 1,
        name: '婚姻登记预约查询',
        img: require('@/assets/images/hunyinf.png'),
        rate: 4,
        people: 4101
      }, {
        id: 2,
        name: '补领婚姻证预约',
        img: require('@/assets/images/buling.png'),
        rate: 4,
        people: 2110
      }, {
        id: 3,
        name: '涉外婚姻登记预约',
        img: require('@/assets/images/shewai.png'),
        rate: 4,
        people: 533
      }, {
        id: 4,
        name: '婚姻登记预约查询',
        img: require('@/assets/images/hunyins.png'),
        rate: 4,
        people: 3529
      }, {
        id: 5,
        name: '离婚登记预约',
        img: require('@/assets/images/lihun.png'),
        rate: 4,
        people: 6904
      }, {
        id: 6,
        name: '婚姻登记信息查询',
        img: require('@/assets/images/hunyint.png'),
        rate: 4,
        people: 93540
      }],
      phone: require('@/assets/images/phone.png')
    }
  },
  computed: {
    ...mapState(['userName'])
  },
  methods:{
      jump(id){
          let currId = id;
          if(currId == 6) {
              this.$router.push({path: '/reservationQuery'});
          }else{
              return;
          }
      }
  }
}
</script>
<style lang="less" scoped>
  .app-container{
    width: 100%;
    .container-top{
      width: 100%;
      padding-bottom: 28.1%;
      position: relative;
      background:url('../../assets/images/secondtop.jpg') no-repeat;
      background-size: cover;
      z-index: 2;
      p{
          font-weight: 400;
      }
      .firstTip{
          position: absolute;
          top: 50%;
          left: 50%;
          font-size: 18px;
          color: #F4F9FF;
          transform: translate(-50%, -50%;);
          z-index: 10;
      }
      .secondTip{
          width: 80%;
          position: absolute;
          bottom: 5%;
          left: 50%;
          font-size: 12px;
          color: #F4F9FF;
          transform: translate(-50%, -50%;);
          z-index: 10;
          p{
              text-align: center;
          }
      }
    }
    .container-center{
        width: 100%;
        .box{
            .content{
                width: 100%;
                list-style: none;
                .content-item{
                   width: 96%;
                   margin: auto;
                   height: 100%;
                   display: flex;
                   flex-flow: row nowrap;
                   justify-content: space-between;
                   align-items: center;
                   background: #fff;
                   padding-top: 28px;
                   .item-left{
                       display: flex;
                       flex-flow: row nowrap;
                       align-items: center;
                       img{
                           width: 32px;
                           height: 32px;
                       }
                       .text{
                           padding: 4px 0 0 8px;
                           p{
                               margin: 0;
                               padding: 0;
                           }
                           p:nth-child(1){
                               font-size: 18px;
                               font-weight: 400;
                               color: #454543;
                           }
                           p:nth-child(2){
                               font-size: 12px;
                               color: #959998;
                               margin-top: 8px;
                           }
                           .rate{
                               padding-top: 12px;
                               span{
                                   padding: 8px;
                                   font-size: 12px;
                                   color: #959998;
                               }
                           }
                       }
                   }
                }
            }
        }
    }
    .container-bottom{
        display: flex;
        justify-content: center;
        align-items: center;
        .contanct{
            padding-top: 40px;
            width: 40%;
            div{
               font-size: 12px;
               color: #959998;
               margin-bottom: 8px;
               display: flex;
               flex-flow: row nowrap;
               justify-content: space-between;
               align-items: center;
               img{
                   width: 14px;
                   height: 14px;
               }
            }

        }
    }
  }
  /deep/.van-rate__item:not(:last-child) {
    padding-right: 0;
}
</style>